<template>
  <div class="xd-settle">
      <div class="list" v-show="isShow">
        <Card>
          <p slot="title">
            <Icon type="md-list" />
            结算统计
          </p>
          <Form ref="formInline" :model="formSearch"  inline>
              <FormItem prop="radioCount">
                <RadioGroup v-model="formSearch.type" @on-change="changeRadio">
                  <Radio label="y">按年统计</Radio>
                  <Radio label="m">按月统计</Radio>
                  <Radio label="d">按日统计</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem prop="user">
                <DatePicker :type="dateType" placeholder="起始时间" style="width: 200px"  v-model="formSearch.startTime" :options="startTimeOption" @on-change="onStartTimeChange"></DatePicker>
              </FormItem>
              <FormItem prop="user">
                <DatePicker :type="dateType" placeholder="结束时间" style="width: 200px"  v-model="formSearch.endTime" :options="endTimeOption" @on-change="onEndTimeChange"></DatePicker>
              </FormItem>
              <FormItem prop="depaid" v-show="this.access!=='wash'">
                <Select class="select" v-model="formSearch.depaid" placeholder="请选择洗涤公司">
                  <Option v-for="item in washList" :value="item.depaid" :key="item.depaid">
                  {{ item.depaname }}
                  </Option>
                </Select>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="handleSeacrh()">查询</Button>
              </FormItem>
          </Form>
          <Table highlight-row stripe :columns="columns" :data="data" ></Table>
          <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
              <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
            </div>
          </div>
        </Card>
      </div>
      <div class="view" v-show="!isShow">
        <Card>
          <p slot="title">
            <Icon type="ios-paper" />
            查看详情
          </p>
          <p slot="extra" >
            <Button type="primary" @click="goBack()">返回</Button>
          </p>
          <div class="view-content">
            <Table highlight-row stripe :columns="columnsA" :data="dataA" ></Table>
          </div>
        </Card>
      </div>
  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import i18n from "./locale";
import mixinDate from "@/mixin/date-mixin";
import mixinTag from "@/mixin/tag-mixin";

export default {
  name: "xd-settle",
  mixins: [mixinDate, mixinTag],
  components: {},
  data() {
    return {
      i18n: i18n,
      isShow: true,
      washList: [],
      dateType: "date",
      endTimeOption: {
        disabledDate(endTime) {
          return endTime && endTime.valueOf() < new Date().getTime() - 86400000;
        }
      },
      startTimeOption: {
        disabledDate(startTime) {
          return (
            startTime && startTime.valueOf() > new Date().getTime() - 86400000
          );
        }
      },
      formSearch: {
        depaid: "",
        type: "m",
        startTime: new Date(),
        endTime: new Date(),
        pageNum: 1,
        pageSize: 20
      },
      cacheFormSearch: {}, //查询后保存，详情查询在读取
      page: {
        total: 0,
        pageSize: 20
      },
      columns: [
        {
          title: "医院",
          key: "depaname"
        },
        {
          title: "数量",
          key: "count"
        },
        {
          title: "金额",
          key: "sum",
          render: (h, params) => {
            const row = params.row;
            return h("span", parseFloat(row.sum).toFixed(2));
          }
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ],
      data: [],
      columnsA: [
        {
          title: "医院",
          key: "depaname"
        },
        {
          title: "类别",
          key: "categoryname"
        },
        {
          title: "数量",
          key: "count"
        },
        {
          title: "金额",
          key: "sum",
          render: (h, params) => {
            const row = params.row;
            return h("span", parseFloat(row.sum).toFixed(2));
          }
        }
      ],
      dataA: []
    };
  },

  mounted() {
    this.resetInit();
  },

  activated() {
    let userInfo = this.$store.state.user.userInfo.data;
    this.access = this.$store.state.user.access;
    if (this.access !== "wash") {
      this.getWashlList();
    }
  },

  methods: {
    resetInit() {
      let userInfo = this.$store.state.user.userInfo.data;
      this.access = this.$store.state.user.access;
      if (this.access == "wash") {
        this.formSearch.depaid = userInfo.depaid;
        this.handleSeacrh();
      } else {
        this.getWashlList();
      }
    },

    getWashlList() {
      API.getWashlList({ type: 1 })
        .then(res => {
          if (res.code == 200) {
            this.washList = res.data;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    onStartTimeChange(startTime, type) {
      this.endTimeOption = {
        disabledDate(endTime) {
          return (
            endTime &&
            endTime.valueOf() < new Date(startTime).getTime() - 86400000
          );
        }
      };
    },

    onEndTimeChange(endTime, type) {
      this.startTimeOption = {
        disabledDate(startTime) {
          return (
            startTime &&
            startTime.valueOf() > new Date(endTime).getTime() - 86400000
          );
        }
      };
    },

    formatTime: function(timeStr1, bool) {
      return formatNetTime(timeStr1, bool);
    },

    handleSeacrh() {
      let obj = _.clone(this.formSearch);
      this.cacheFormSearch = obj; //缓存，详情查询使用
      if (obj.depaid == "") {
        this.$Message.error("查询洗涤公司必选！");
        return;
      }
      if (obj.startTime == "" || obj.endTime == "") {
        this.$Message.error("起始与结束时间必填！");
        return;
      }
      obj.pageNum = 1;
      this.formSearch = _.clone(obj);
      if (obj.startTime != "" || obj.endTime != "") {
        obj.startTime = this.UTC(obj.startTime, "starttime");
        obj.endTime = this.UTC(obj.endTime, "endtime");
      }
      this.getList(obj);
    },

    changePage(pageNum) {
      let obj = _.clone(this.formSearch);
      maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.formSearch = _.clone(obj);
      //obj.startTime = this.UTC(obj.startTime,"starttime");
      //obj.endTime = this.UTC(obj.endTime,"endtime");
      this.getList(obj);
    },

    getList(obj) {
      API.getList(obj)
        .then(res => {
          let data = res.data;
          this.page.total = data.total;
          this.page.pageSize = data.pageSize;
          this.data = data.list;
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    goBack() {
      this.isShow = true;
      this.dataA = [];
    },

    show(index) {
      this.currentData = this.data[index];
      this.isShow = false;
      let obj = {
        depaid: this.currentData.depaid,
        type: this.cacheFormSearch.type,
        startTime: this.cacheFormSearch.startTime,
        endTime: this.cacheFormSearch.endTime
      };
      if (obj.startTime != "" || obj.endTime != "") {
        obj.startTime = this.UTC(obj.startTime, "starttime");
        obj.endTime = this.UTC(obj.endTime, "endtime");
      }
      this.getOne(obj);
    },

    getOne(obj) {
      API.getOne(obj)
        .then(res => {
          let data = res.data;
          this.dataA = data.list;
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    changeRadio(value) {
      if (value == "y") {
        this.dateType = "year";
      } else if (value == "m") {
        this.dateType = "month";
      } else if (value == "d") {
        this.dateType = "date";
      }
      this.formSearch.radioCount = value;
    }
  }
};
</script>
<style lang="less" >
@import "./xd-settle.less";
</style>
